<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AngularJS controller</title>
    <script src="../bower_components/angular/angular.min.js"></script>

    <script type="text/javascript">
        var app = angular.module('myapp', []);
        app.controller('StudentController', function($scope) {
            $scope.student = {
                firstName: "Jon",
                lastName: "Snow",

                fullName: function() {
                    var studentObject = $scope.student;
                    return studentObject.firstName + " " + studentObject.lastName;
                }
            }
        });
    </script>
</head>
<body ng-app="myapp">
    <div ng-controller="StudentController">
        Enter first name: <input type="text" ng-model="student.firstName"><br>
        Enter last name: <input type="text" ng-model="student.lastName"><br>
        <br>
        You are entering: {{ student.fullName() }}
    </div>
</body>
</html>